const { defineComponent } = require('san')

const Alert = defineComponent({
    template: `
    <template>
        <div class="tip-mask" s-if="show">
            <div class="s-tip-box">
                <div class="s-tip-ctn">
                    <h3>
                        <i class="iconfont" style="color: {{ color || '#333' }}" s-html="{{ icon || '&#xe745;' }}"></i>
                        <span class="s-tip-title">{{ title || '提示' }}</span>
                    </h3>

                    <div class="s-tip-text">{{ text || '' }}</div>

                    <div class="tip-btn-group">
                        <button class="tip-btn main-btn" on-click="close">知道了</button>
                    </div>
                </div>
            </div>
        </div>
    </template>
    `,
    close () {
        this.data.set('show', false)
    },
    initData () {
        return {
            icon: '&#xe745;',
            color: '#F56A00',
            show: false,
            title: '',
            text: ''
        }
    }
})

const useTip = sanCom => {

    const elart = new Alert()
    elart.attach(document.body)

    sanCom.elert = elart


    sanCom.prototype.$info = str => {
        if (typeof str === 'string') {
            sanCom.elert.data.set('text', str)
        } else if (typeof str === 'object') {
            sanCom.elert.data.set('text', str && str.text || '')
            sanCom.elert.data.set('title', str && str.title || '')
        }
        sanCom.elert.data.set('color', '#F56A00')
        sanCom.elert.data.set('icon', '&#xe745;')
        sanCom.elert.data.set('show', true)
    }

    sanCom.prototype.$error = str => {
        if (typeof str === 'string') {
            sanCom.elert.data.set('text', str)
        } else if (typeof str === 'object') {
            sanCom.elert.data.set('text', str && str.text || '')
            sanCom.elert.data.set('title', str && str.title || '')
        }
        sanCom.elert.data.set('color', '#E4393C')
        sanCom.elert.data.set('icon', '&#xe730;')
        sanCom.elert.data.set('show', true)
    }

    sanCom.prototype.$success = str => {
        if (typeof str === 'string') {
            sanCom.elert.data.set('text', str)
        } else if (typeof str === 'object') {
            sanCom.elert.data.set('text', str && str.text || '')
            sanCom.elert.data.set('title', str && str.title || '')
        }
        sanCom.elert.data.set('color', '#3DBD7D')
        sanCom.elert.data.set('icon', '&#xe73f;')
        sanCom.elert.data.set('show', true)
    }

    return sanCom
}

module.exports = useTip